<template>
    <div class="inputNumber">
        <el-input-number v-model="minNum" controls-position="right" size="mini" placeholder='最小值' :min="0"
            @change="numChange($event,comData.label[0])">
        </el-input-number>
        <span>~</span>
        <el-input-number v-model="maxNum" controls-position="right" size="mini" placeholder='最大值' :min="0"
            @change="numChange($event,comData.label[1])">
        </el-input-number>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                minNum: undefined,
                maxNum: undefined
            }
        },
        props:{
            comData:{
                type: Object,
                default: () => ({})
            }
        },
        methods:{
            numChange(event,key){
                const {label} = this.comData
                if(typeof(label) === 'number'){
                    //自定义字段
                    let min = this.minNum !== undefined ? this.minNum : ''
                    let max = this.maxNum !== undefined ? this.maxNum : ''
                    this.$emit('setFormData',{[label]:(min + ',' + max) === ',' ? undefined : (min + ',' + max)})
                }else{
                    this.$emit('setFormData',{[key]:event})
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    .inputNumber {
        display: flex;

        span {
            flex: 2;
            text-align: center;
        }

        /deep/ .el-input-number.is-controls-right .el-input__inner{
            padding-left: 5px;
            padding-right: 30px;
        }

        /deep/ .el-input-number--mini {
            flex: 12;
        }
    }
</style>